<template>
  <div>
    <header>
      <span @click="goback"
        ><img src="../../assets/wx_20210910145159.png" alt=""
      /></span>
      <span class="sousuo">搜索</span>
      <span> </span>
    </header>
    <div class="submit">
      <input
        type="text"
        name=""
        id=""
        placeholder="请输入商家或美食名称"
        v-model="cont"
      />
      <button @click="submit">提交</button>
    </div>
    <ul>
      <li v-for="(i, item) in this.$store.state.submitAway" :key="item">
        {{ i }}
        <button @click="del(item)">删除</button>
      </li>
    </ul>
    <p
      class="qingkong"
      @click="delAll"
      v-if="this.$store.state.submitAway.length"
    >
      清除全部
    </p>
    <Footer></Footer>
  </div>
</template>


<script>
import { submit } from "../../API/index";
import Footer from "../footer/footer.vue";

export default {
  components: {
    Footer,
  },
  data() {
    return {
      cont: "",
    };
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    async submit() {
      this.$store.commit("setC", this.cont);
      var res = await submit(this.$route.query.id, this.cont);
      console.log(res.data);
    },
    del(item) {
      this.$store.commit("delC", item);
    },
    delAll() {
      this.$store.commit("delCS");
    },
  },
};
</script>
<style scoped>
header span img {
  width: 1rem;
  height: 1rem;
}
.sousuo {
  color: #fff;
}
.submit input {
  background: #ccc;
}
header {
  background-color: #3190e8;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 2.95rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.3rem;
}
button {
  background-color: #3190e8;
  font-size: 0.65rem;
  color: #fff;
  border-radius: 0.1rem;
  margin-bottom: 0.4rem;
  width: 100%;
  height: 2.4rem;
  outline: none;
  border: none;
  width: 20%;
}
input {
  width: 60%;
  outline: none;
  padding-left: 1rem;
  border: 1px solid #e4e4e4;
  font-size: 0.65rem;
  color: #333;
  height: 2.4rem;
  text-decoration: none;
  color: #333;
  box-sizing: border-box;
}
.submit {
  margin-top: 70px;
}
.qingkong {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>